<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-calendar"></i> 学生操作
                </el-breadcrumb-item>
                <el-breadcrumb-item>添加学生</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="form-box">
                <el-form ref="form" :model="form" :rules="addFormRules" label-width="80px">
                    <el-form-item label="学生名" prop="name">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="选性别" prop="sex">
                        <el-select v-model="form.sex" placeholder="请选择性别">
                            <el-option key="bbk" label="男" value="男"></el-option>
                            <el-option key="xtc" label="女" value="女"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="注册时间" prop="date">
                        <el-col :span="11">
                            <el-date-picker
                                type="date"
                                placeholder="选择日期"
                                v-model="form.date"
                                value-format="yyyy-MM-dd"
                                style="width: 100%;"
                            ></el-date-picker>
                        </el-col>
                       
                    </el-form-item>
                    <el-form-item label="户籍地址" prop="address">
                        <el-input v-model="form.address"></el-input>
                    </el-form-item>
                    <el-form-item label="电话号码" prop="phone">
                        <el-input v-model="form.phone"></el-input>
                    </el-form-item>
                    <el-form-item label="专业班级" prop="major">
                       <el-input v-model="form.major"></el-input>
                    </el-form-item>
                    
                    <el-form-item label="个人简介">
                        <el-input type="textarea" rows="5" v-model="form.desc"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button class="mybutton1" @click="onSubmit">确定</el-button>
                        <el-button class="mybutton2">取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    name: 'baseform',
    data() {
        // 验证手机号的规则
        const checkMobile = (rule, value, cb) => {
            const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
            if (regMobile.test(value)) {
                // 合法的手机号码
                return cb();
            }
            cb(new Error('手机号码格式不正确'));
        };
        return {
            options: [
                {
                    value: 'guangdong',
                    label: '广东省',
                    children: [
                        {
                            value: 'guangzhou',
                            label: '广州市',
                            children: [
                                {
                                    value: 'tianhe',
                                    label: '天河区'
                                },
                                {
                                    value: 'haizhu',
                                    label: '海珠区'
                                }
                            ]
                        },
                        {
                            value: 'dongguan',
                            label: '东莞市',
                            children: [
                                {
                                    value: 'changan',
                                    label: '长安镇'
                                },
                                {
                                    value: 'humen',
                                    label: '虎门镇'
                                }
                            ]
                        }
                    ]
                },
                {
                    value: 'hunan',
                    label: '湖南省',
                    children: [
                        {
                            value: 'changsha',
                            label: '长沙市',
                            children: [
                                {
                                    value: 'yuelu',
                                    label: '岳麓区'
                                }
                            ]
                        }
                    ]
                }
            ],
            form: {
                phone:'',
                name: '',
                sex: '',
                address:'',
                date: '',
                desc: '',
                major:'',
            },
            addFormRules:{
                 
                address: [{ required: true, message: '请输入学生家庭住址', trigger: 'blur' }],
                phone: [
                    { required: true, message: '请输入学生电话号码', trigger: 'blur' },
                    {
                        validator: checkMobile,
                        trigger: 'blur'
                    }
                ],
                sex: [{ required: true, message: '请选择学生性别', trigger: 'blur' }],
                date: [{ required: true, message: '请选择日期', trigger: 'blur' }],
                major: [{ required: true, message: '请输入学生专业年级', trigger: 'blur' }],
                name: [{ required: true, message: '请输入学生姓名', trigger: 'blur' }]
            }
        };
    },
    methods: {
        onSubmit() {
            axios({
                method:'post',
                url:'http://172.22.10.90:3000/students/add',
                params:this.form
            }).then((res) => {
                
            })
            this.$message.success('添加成功！');
        }
    }
};
</script>
<style scoped>
    .mybutton1{
    border: 0;
    color: #fff;
    border-radius: 15px;
    background-color: rgb(108, 174, 194);
}
.mybutton1:hover{
    border: 0;
    color: #fff;
    border-radius: 15px;
    background-color: rgb(3, 58, 161);
}

.mybutton2{
    border: 0;
    color: #fff;
    border-radius: 15px;
    background-color: rgb(250, 136, 55);
}
.mybutton2:hover{
    border: 0;
    color: #fff;
    border-radius: 15px;
    background-color: rgb(219, 107, 28);
}

.mybutton3{
    border: 0;
    color: #fff;
    border-radius: 15px;
    background-color: rgb(197, 45, 7);
}
.mybutton3:hover{
    border: 0;
    color: #fff;
    border-radius: 15px;
    background-color: rgb(150, 33, 3);
}
</style>